<#assign basePath=request.contextPath>
<#include "${basePath}/include.ftl" >
<style>

    .show {
        width: 500px;
        height: 500px;
        border: 1px solid #000000;
    }
</style>
<body>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="entryLoad" style="z-index: 99999999;" hidden="true" id="entryLoad">
    <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
</div>
<div class="show">
    <img src="" id="show" >
</div>
<div class="layui-upload-drag" id="upload">
    <i class="layui-icon layui-icon-upload"></i>
    <p>点击上传，或将文件拖拽到此处</p>
</div>
</body>
<script type="text/javascript">
    $(function () {
        layui.use(['layer', 'form', 'upload','element'], function () {
            var layer = layui.layer
                    , form = layui.form
                    , element = layui.element
                    ,upload = layui.upload; //上传
            //上传
            upload.render({
                elem: '#upload'
                , xhr: xhrOnProgress
                , progress: function (value) {//上传进度回调 value进度值
                    element.progress('entryLoad','100%');
                }
                , url: '/upload' //上传接口
                , accept: "images" // 指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
                , acceptMime: "image/*" // 规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如： acceptMime: 'image/*'（只显示图片文件）acceptMime: 'image/jpg, image/png'（只显示 jpg 和 png 文件）注：该参数为 layui 2.2.6 开始新增
                , done: function (data) {
                    var errcode =  data.errcode;
                    if(errcode == "0"){
                        var fileName = data.data.fileName;
                        var filePath = data.data.filePath;
                        $("#show").attr("src","/show?filePath="+filePath + "&fileName=" + fileName)
                    }
                }
            });
        })
    })
</script>
